<template>
  <div>
    <h1>{{ $store.state.count }}</h1>
    <button @click="add">访问mutations当中的方法</button>
    <button @click="decrementAct">组件触发actions</button>
    <h1>{{ $store.getters.evenOrOdd }}</h1>

    <hr />
    <h1>{{ $store.state.yangyang.info }}</h1>
    <button @click="change">改动洋洋为思哲</button>
    <!-- <h1>{{ count }}</h1> -->
    <h1>{{ info }}</h1>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  mounted() {
    console.log(this.$store);
    console.log(this.$store.getters.evenOrOdd);
  },
  /* computed: {
    // mapState的用法   扩展运算符
    // ...mapState(["count"]),

  }, */
  // 第二种写为对象的写法
  computed: mapState({
    count: (state) => state.count,
    info: (state) => state.yangyang.info,
  }),
  methods: {
    add() {
      this.$store.commit("add");
    },
    decrementAct() {
      this.$store.dispatch("decrementAct");
    },
    change() {
      this.$store.commit("change");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>